/* 选中页面内所有元素 */

* {
<<<<<<< HEAD
  /* 清除外边距 */
  margin: 0;
  /* 清除内边距 */
  padding: 0;
=======
    /* 清除外边距 */
    margin: 0;
    /* 清除内边距 */
    padding: 0;
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}

/* 选中页面内的<html>和<body>元素 */

html,
body {
<<<<<<< HEAD
  /* 高度设为100%像素 */
  height: 100%;
=======
    /* 高度设为100%像素 */
    height: 100%;
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}

/* 选中页面内的<body>元素 */

body {
<<<<<<< HEAD
  /* 背景设为#000000颜色值 */
  background-color: #000000;
=======
    /* 背景设为#000000颜色值 */
    background-color: #000000;
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}

/* 选中页面内的<div id="box">元素 */

div#box {
<<<<<<< HEAD
  /* 宽度设为200像素 */
  width: 200px;
  /* 高度设为200像素 */
  height: 200px;
  /* 背景设为#ccc颜色值 */
  background-color: #ccc;
  /* 设为基于<body>元素进行绝对定位 */
  position: absolute;
  /* 设为距离<body>元素最上边有0像素 */
  top: 0;
  /* 设为距离<body>元素最下边有0像素 */
  bottom: 0;
  /* 设为距离<body>元素最左边有0像素 */
  left: 0;
  /* 设为距离<body>元素最右边有0像素 */
  right: 0;
  /* 让当前元素上下左右的外边距自动调整 */
  margin: auto;
  /* 元素变换设置为视觉距离为800像素、Y轴逆时针旋转60度和X轴顺时针旋转45度 */
  transform: perspective(800px) rotateY(-60deg) rotateX(45deg);
  /* 让子元素的变换效果生效 */
  transform-style: preserve-3d;
=======
    /* 宽度设为200像素 */
    width: 200px;
    /* 高度设为200像素 */
    height: 200px;
    /* 背景设为#ccc颜色值 */
    background-color: #ccc;
    /* 设为基于<body>元素进行绝对定位 */
    position: absolute;
    /* 设为距离<body>元素最上边有0像素 */
    top: 0;
    /* 设为距离<body>元素最下边有0像素 */
    bottom: 0;
    /* 设为距离<body>元素最左边有0像素 */
    left: 0;
    /* 设为距离<body>元素最右边有0像素 */
    right: 0;
    /* 让当前元素上下左右的外边距自动调整 */
    margin: auto;
    /* 元素变换设置为视觉距离为800像素、Y轴逆时针旋转60度和X轴顺时针旋转45度 */
    transform: perspective(800px) rotateY(-60deg) rotateX(45deg);
    /* 让子元素的变换效果生效 */
    transform-style: preserve-3d;
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}

/* 
选中页面内的元素: 
<div id="box">
  <div>
*/

<<<<<<< HEAD
<<<<<<< HEAD
div.front {
<<<<<<< HEAD
  /* 宽度设为100%像素 */
  width: 100%;
  /* 高度设为100%像素 */
  height: 100%;
  /* 背景设置为以下载入的图像 */
  background-image: url("front.png");
  /* 背景宽高尺寸设置为100%像素 */
  background-size: cover;
  /* Z轴往前移动100像素 */
  transform: translateZ(100px);
  /* 设为基于<div id="box">元素进行绝对定位 */
  position: absolute;
  /* 设为距离<div id="box">元素最上边有0像素 */
  top: 0;
  /* 设为距离<div id="box">元素最左边有0像素 */
  left: 0;
=======
=======
div#box>div {
>>>>>>> 3c86df6... 设置后视图的样式
=======
div#box>div {
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
    /* 宽度设为100%像素 */
    width: 100%;
    /* 高度设为100%像素 */
    height: 100%;
    /* 背景宽高尺寸设置为100%像素 */
    background-size: cover;
    /* 设为基于<div id="box">元素进行绝对定位 */
    position: absolute;
    /* 设为距离<div id="box">元素最上边有0像素 */
    top: 0;
    /* 设为距离<div id="box">元素最左边有0像素 */
    left: 0;
    /* 当前元素阴影效果设置为水平阴影的位置是0像素、垂直阴影的位置是0像素、模糊距离是100像素以及阴影的颜色为#5fbcff值 */
    box-shadow: 0 0 100px #5fbcff;
    /* 当前元素的透明度是80% */
    opacity: .8;
<<<<<<< HEAD
<<<<<<< HEAD
>>>>>>> 3413e7a... 设置前视图的阴影和透明效果
=======
=======
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}

/* 选中页面内的<div class="front">元素 */

div.front {
    /* 背景设置为以下载入的图像 */
    background-image: url("front.png");
    /* Z轴往前移动100像素 */
    transform: translateZ(100px);
}

/* 选中页面内的<div class="back">元素 */

div.back {
    /* 背景设置为以下载入的图像 */
    background-image: url("back.png");
    /* Z轴往后移动100像素 */
    transform: translateZ(-100px);
<<<<<<< HEAD
<<<<<<< HEAD
>>>>>>> 3c86df6... 设置后视图的样式
=======
=======
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}

/* 选中页面内的<div class="top">元素 */

div.top {
    /* 背景设置为以下载入的图像 */
    background-image: url("top.png");
    /* Y轴往后移动100像素，X轴顺时针旋转90度 */
    transform: translateY(-100px) rotateX(90deg);
<<<<<<< HEAD
<<<<<<< HEAD
>>>>>>> 24a8702... 设置顶部视图的样式
=======
=======
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}

/* 选中页面内的<div class="bottom">元素 */

div.bottom {
    /* 背景设置为以下载入的图像 */
    background-image: url("bottom.png");
    /* Y轴往后移动100像素，X轴顺时针旋转90度 */
    transform: translateY(100px) rotateX(90deg);
<<<<<<< HEAD
<<<<<<< HEAD
>>>>>>> 2303aa2... 设置底部视图的样式
=======
=======
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}

/* 选中页面内的<div class="left">元素 */

div.left {
    /* 背景设置为以下载入的图像 */
    background-image: url("left.png");
    /* Y轴往后移动100像素，X轴顺时针旋转90度 */
    transform: translateX(-100px) rotateY(90deg);
<<<<<<< HEAD
<<<<<<< HEAD
>>>>>>> ec1f2dd... 设置左视图的样式
=======
=======
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}

/* 选中页面内的<div class="right">元素 */

div.right {
    /* 背景设置为以下载入的图像 */
    background-image: url("right.png");
    /* Y轴往后移动100像素，X轴顺时针旋转90度 */
    transform: translateX(100px) rotateY(90deg);
<<<<<<< HEAD
>>>>>>> 00b0df3... 设置右视图的样式
=======
>>>>>>> a66dfd1b8535b6d76e142d94db16c0ef2b94f905
}